<template>
  <div class="metric-card">
    <div class="header">
      <span class="title">{{ title }}</span>
      <el-tooltip effect="dark" content="较上月变化" placement="top">
        <span
          class="trend"
          :class="trendClass"
        >{{ trendLabel }}</span>
      </el-tooltip>
    </div>
    <div class="content">
      <span class="value">{{ formattedValue }}</span>
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    value: [Number, String],
    trend: Number,  // 百分比数值，如 12.5 表示增长12.5%
    unit: {
      type: String,
      default: ''
    },
    loading: Boolean
  },
  computed: {
    trendClass() {
      if (this.trend > 0) return 'positive';
      if (this.trend < 0) return 'negative';
      return '';
    },
    trendLabel() {
      if (this.trend === null || this.trend === undefined) return '数据加载中...';
      if (this.trend === 0) return '较上月持平';
      const direction = this.trend > 0 ? '增加' : '减少';
      return `较上月${direction} ${Math.abs(this.trend).toFixed(2)}%`;
    },
    formattedValue() {
      if (this.loading) return '--';
      return `${this.value.toLocaleString()}${this.unit}`;
    }
  }
};
</script>

<style scoped>
.metric-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  color: #606266;
  font-size: 14px;
}

.trend {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px; /* 加大圆角 */
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 图标文字间距 */
}
/* 增加图标增强可视化 */
.positive::before {
  content: '▲';
  font-size: 10px;
}
.negative::before {
  content: '▼';
  font-size: 10px;
}
.trend.positive {
  background: #f0f9eb;
  color: #67c23a;
}

.trend.negative {
  background: #fef0f0;
  color: #f56c6c;
}

.value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
</style>
